<template>
  <div class="echart">
    <div class="enlarge" @click="openDialog">
      <i class="el-icon-full-screen" />
    </div>
    <div ref="echarts5" style="width: 100%; height: 100%"></div>
    <el-dialog
      custom-class="echart-dialog"
      :visible.sync="Dialog"
      :modal-append-to-body="false"
      :append-to-body="true"
      :destroy-on-close="true"
      :fullscreen="true"
    >
      <el-row type="flex" class="echart-content">
        <el-col :span="12">
          <div class="echart-enlarge" ref="echarts4Large"></div>
        </el-col>
        <el-col :span="12">
          <div class="echart-enlarge" ref="echarts5Large"></div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "echarts5",
  data() {
    return {
      Dialog: false,
      echarts5: null,
      echart4: null,
      echarts5Large: null,
      option: {}
    };
  },
  created() {},
  computed: {
    echarts4State() {
      return this.$store.state.echarts4State;
    },
    echarts5State() {
      return this.$store.state.echarts5State;
    }
  },
  watch: {
    echarts4State: {
      immediate: true,
      handler(val) {
        if (val.code == 1) {
          let { data } = val;
          let jhkts = [],
            sjyxct = [],
            cjzts = [],
            gongxu = [];
          data.map((item) => {
            gongxu.push(item.gongxu);
            jhkts.push(item.jhkts);
            sjyxct.push(item.sjyxct);
            cjzts.push(item.cjzts);
          });
          this.gongxu = gongxu;
          this.jhkts = jhkts;
          this.sjyxct = sjyxct;
          this.cjzts = cjzts;
          setTimeout(() => {
            this.$nextTick(() => {
              if (this.Dilaog) {
                this.echarts4init();
              }
            });
          }, 500);
        }
      }
    },
    echarts5State: {
      immediate: true,
      handler(val) {
        if (val.code == 1) {
          var data = val.data;
          let dqsjclArr = []; // 当前实际产量
          let ydata = [];
          data.forEach((item) => {
            dqsjclArr.push({
              name: item.pz,
              value: item.dqsjcl ? parseFloat(item.dqsjcl).toFixed(2) : 0,
              devSnNum: item.devSnNum
            });
            ydata.push(item.pz);
          });
          this.ydata = ydata;
          this.dqsjclArr = dqsjclArr;
          setTimeout(() => {
            this.$nextTick(() => {
              this.init();
            });
          }, 500);
        }
      }
    }
  },
  mounted() {
    this.echarts5 = this.$echarts.init(this.$refs.echarts5);
    setTimeout(() => {
      this.echarts5.showLoading({
        color: "#ffffff",
        textColor: "#ffffff",
        maskColor: "rgba(255,255,255,0)"
      });
    });
  },
  methods: {
    init() {
      var option = {
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(50,50,50,0.7)",
          borderColor: "#333",
          textStyle: {
            fontSize: 12,
            color: "#fff",
            lineHeight: 25
          },
          formatter: function(params) {
            let str =
              '<span style="display:inline-block;margin-right:5px;width:10px;height:10px;left:5px;background-color:' +
              params.color +
              '"></span>' +
              params.name +
              "<br>";
            str += `<span>当前实际产量 <span class="number"> ${params.value}</span></span><br>`;
            str += `<span>占比  <span class="number"> ${params.percent}</span>%</span>`;
            return str;
          }
        },
        legend: {
          left: 0,
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 6,
          textStyle: {
            fontSize: 10,
            color: "#316B84"
          }
        },
        color: ["#0F38C3", "#8EDAF2", "#43CCFA", "#14ABEC", "#1C8CB3", "#1562C4", "#1138C3"],

        series: [
          {
            name: "",
            type: "pie",
            center: ["50%", "55%"],
            radius: ["50%", "55%"],
            label: {
              fontSize: 8,
              color: "#316B84",
              formatter: "{per|{d}%}\n{b}",
              rich: {
                per: {
                  fontSize: 10,
                  fontFamily: "electronicFont"
                }
              }
            },

            labelLine: {
              show: true,
              length: 5,
              length2: 8
            },
            emphasis: {
              label: {
                show: true
              }
            },

            data: this.dqsjclArr
          },
          {
            name: "",
            type: "pie",
            center: ["50%", "55%"],
            radius: ["25%", "40%"],
            animation: false,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            emphasis: {
              label: {
                show: false
              }
            },

            data: this.dqsjclArr
          }
        ]
      };
      this.option = option;
      this.echarts5.setOption(option);
      this.echarts5.hideLoading();
      var _this = this;
      window.addEventListener("resize", function() {
        _this.echarts5.resize();
      });
    },
    echarts4init() {
      var option = {
        tooltip: {
          trigger: "axis",
          padding: 10,
          backgroundColor: "rgba(50,50,50,0.7)",
          borderColor: "#333",
          textStyle: {
            fontSize: 16,
            color: "#fff",
            lineHeight: 25
          },
          axisPointer: {
            type: "shadow"
          },
          formatter: function(params) {
            let str = "<span>" + params[0].axisValueLabel + "</span></br>";
            params.forEach((item) => {
              str +=
                '<span style="display:inline-block;margin-right:5px;width:10px;height:10px;left:5px;background-color:' +
                item.color +
                '"></span>' +
                item.seriesName +
                " : <span class='number' style='font-size:20px'>" +
                item.value +
                "</span></br>";
            });

            return str;
          }
        },
        legend: {
          data: ["计划开台数", "实际运行车台", "车间总台数"],
          itemWidth: 16,
          left: "10%",
          itemHeight: 16,
          itemGap: 20,
          textStyle: {
            fontSize: 16,
            color: "#fff"
          }
        },
        color: ["#65FCFF", "#FFFD8A", "#156A8E"],
        grid: {
          left: "5%",
          right: "10%",
          bottom: "5%",
          top: "12%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: this.gongxu,

          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16,
              color: "#fff"
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16,
              color: "#fff"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#316B84",
              type: "dashed",
              width: 1
            }
          }
        },
        series: [
          {
            name: "计划开台数",
            type: "bar",
            barWidth: 15, //柱图宽度
            data: this.jhkts
          },
          {
            name: "实际运行车台",
            type: "bar",
            barWidth: 15, //柱图宽度

            data: this.sjyxct
          },
          {
            name: "车间总台数",
            type: "bar",
            barWidth: 15, //柱图宽度

            data: this.cjzts
          }
        ]
      };
      this.echarts4.setOption(option);
      this.echarts4.hideLoading();
      var _this = this;
      window.addEventListener("resize", function() {
        _this.echarts4.resize();
      });
    },
    openDialog() {
      this.Dialog = true;
      setTimeout(() => {
        this.$nextTick(() => {
          this.echarts5Large = this.$echarts.init(this.$refs.echarts5Large);
          const option = {
            tooltip: {
              trigger: "item",
              backgroundColor: "rgba(50,50,50,0.7)",
              borderColor: "#333",
              textStyle: {
                fontSize: 16,
                color: "#fff",
                lineHeight: 25
              },
              formatter: function(params) {
                let str =
                  '<span style="display:inline-block;margin-right:5px;width:10px;height:10px;left:5px;background-color:' +
                  params.color +
                  '"></span>' +
                  params.name +
                  "<br>";
                str += `<span>当前实际产量 <span class="number" style='font-size:20px'> ${params.value}</span></span><br>`;
                str += `<span>占比  <span class="number" style='font-size:20px'> ${params.percent}</span>%</span>`;
                return str;
              }
            },
            legend: {
              left: 0,
              itemWidth: 16,
              itemHeight: 16,
              itemGap: 20,
              textStyle: {
                fontSize: 16,
                color: "#fff"
              }
            },
            color: ["#0F38C3", "#8EDAF2", "#43CCFA", "#14ABEC", "#1C8CB3", "#1562C4", "#1138C3"],

            series: [
              {
                name: "",
                type: "pie",
                center: ["50%", "55%"],
                radius: ["50%", "55%"],
                label: {
                  fontSize: 16,
                  color: "#fff",
                  formatter: "{per|{d}%}\n{b}",
                  rich: {
                    per: {
                      fontSize: 20,
                      fontFamily: "electronicFont"
                    }
                  }
                },

                labelLine: {
                  show: true,
                  length: 20,
                  length2: 36
                },
                emphasis: {
                  label: {
                    show: true
                  }
                },

                data: this.dqsjclArr
              },
              {
                name: "",
                type: "pie",
                center: ["50%", "55%"],
                radius: ["25%", "40%"],
                animation: false,
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                emphasis: {
                  label: {
                    show: false
                  }
                },

                data: this.dqsjclArr
              }
            ]
          };
          this.echarts5Large.setOption(option);
          this.echarts5Large.hideLoading();
          var _this = this;
          this.echarts4 = this.$echarts.init(this.$refs.echarts4Large);
          this.echarts4init();
          window.addEventListener("resize", function() {
            _this.echarts5Large.resize();
          });
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped></style>
